<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自助取票</title>
  <link rel="stylesheet" href="../../assets/css/public.css">
  <link rel="stylesheet" href="../../assets/css/check.css">
</head>
<body>
<div class="return-box">
  <p><a href="javascript:history.go(-1)"><i align="center"><img src="../../assets/images/icon-back.png"></i><span>返回</span></a></p>
  <h1>门票订购</h1>
</div>
<div class="gray-box box">
  <div class="check-box">
    <div class="type-box">
      <div>
        <input type="radio" value="automatic" name="selectType" id="automatic" checked />
        <label for="automatic">自动识别</label>
      </div>
      <div>
        <input type="radio" value="manual" name="selectType" id="manual" />
        <label for="manual">手动输入</label>
      </div>
    </div>
    <div class="content-box">
      <div class="automatic-content">
        请将身份证放置在感应区
      </div>
      <div class="manual-content">
        <div>
          <label for="">姓名：</label>
          <input type="text" placeholder="请输入本人身份证姓名">
        </div>
        <div>
          <label for="">身份证：</label>
          <input type="text" placeholder="请输入本人身份证号">
        </div>
      </div>
    </div>
    <button class="btn check-btn orange-btn">立即取票</button>
  </div>
</div>
<!--取票的弹框-->
<div class="pop-box">
  <div class="list-box">
    <h3>请选择您要打印的参观券</h3>
    <div class="all-box">
      <input type="checkbox" id="selectAll">
      <label for="selectAll" ><i></i>全部</label>
    </div>
    <ul class="list-details">
      <li>
        <input type="checkbox" id="id-1">
        <label for="id-1">
          <div>
            <h4>二里头夏都遗址博物馆-参观券</h4>
            <p>订票时间：2019年10月17日09:57:10</p>
          </div>
          <span></span>
        </label>
      </li>
      <li>
        <input type="checkbox" id="id-2">
        <label for="id-2">
          <div>
            <h4>二里头夏都遗址博物馆-参观券</h4>
            <p>订票时间：2019年10月17日09:57:10</p>
          </div>
          <span></span>
        </label>
      </li>
      <li>
        <input type="checkbox" id="id-3">
        <label for="id-3">
          <div>
            <h4>二里头夏都遗址博物馆-参观券</h4>
            <p>订票时间：2019年10月17日09:57:10</p>
          </div>
          <span></span>
        </label>
      </li>
      <li>
        <input type="checkbox" id="id-4">
        <label for="id-4">
          <div>
            <h4>二里头夏都遗址博物馆-参观券</h4>
            <p>订票时间：2019年10月17日09:57:10</p>
          </div>
          <span></span>
        </label>
      </li>
    </ul>
    <div class="btn-box">
      <button class="btn cancel-btn">取消</button>
      <button class="orange-btn btn">立即打印</button>
    </div>
  </div>
</div>
</body>
<script src="../../assets/plugin/jquery.min.js"></script>
<script>
  $('.type-box div input').click(function () {
    if ($(this).val() === 'automatic'){
      $('.automatic-content').show()
      $('.manual-content').hide()
    }else {
      $('.automatic-content').hide()
      $('.manual-content').show()
    }
  })
  //全选
  $(function() {
    $("#selectAll").click(function() {
      $(".list-details li input").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象
    });
  })
  //取票
  $('.check-btn').click(function () {
    $('.pop-box').show()
  })
  $('.pop-box .btn-box .cancel-btn').click(function () {
    $('.pop-box').hide()
  })
</script>
</html>
